<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="ui/pages/login.css">
		<link rel="stylesheet" type="text/css" href="ui/style.css">
		<link rel="stylesheet" type="text/css" href="ui/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="ui/bootstrap-responsive.min.css">
		<link rel="stylesheet" type="text/css" href="ui/pages/glDatePicker.default.css">
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
		 <link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
	</head>
	
	<body>
	<div class="navbar navbar-fixed-top">
	  <div class="navbar-inner">
	    <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
	                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </a><a class="brand" href="index.html"><div class = pageHeader>CVS Holiday Management </div> </a>
	      <div class="nav-collapse">
	        <ul class="nav pull-right">
	      	<li class="dropdown"><a href="login">Logout </a>
	            <ul class="dropdown-menu">
	              <li><a href="login">Logout</a></li>
	              <li><a href="javascript:;">Help</a></li>
	            </ul>
	          </li>
	     
	        </ul>
	        <form class="navbar-search pull-right">
	          <input type="hidden" class="search-query" placeholder="Search">
	        </form>
	      </div>
	      <!--/.nav-collapse --> 
	    </div>
	    <!-- /container --> 
	  </div>
	  <!-- /navbar-inner --> 
	</div>
	  <p></p><p></p><br>
	   <div class="subnavbar">
	  <div class="subnavbar-inner">
	    <div class="container">
	      <ul class="mainnav">
	        <li ><a href="index.html"><i class="icon-dashboard"></i><span>Home</span> </a> </li>
	        <li class="active"><a href="book"><i class="icon-list-alt"></i><span>Book</span> </a> </li>
	        <li><a href="showmydays"><i class="icon-facetime-video"></i><span>View</span> </a></li>
	   		  <li><a href="admin"><i class="icon-facetime-video"></i><span>Admin</span> </a></li>
	          </ul>
	        </li>
	      </ul>
	    </div>
	    <!-- /container --> 
	  </div>
	  <!-- /subnavbar-inner --> 
	</div>
	<!-- /subnavbar -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/glDatepicker.js">
	</script>
	
	
	
	<div class="pageHeader" >
	 Request Some Time Off 

<br>
<br>
 Allocation Remaining: ${user.allocation}
	 	
	 	 
	</div>
	<div class = "bookingBox">
	<div class = "datepickerNew">
	<form  method="post" action="/bookDate">
	<p>From:</p>
	
	<input id="mydate" name="mydate" type="text"  placeholder="First day off" />
	<input id="oneDay" type="checkbox"> One Day?
	

	 <script type="text/javascript">
	 

	
	        $(window).load(function()
	        {
	        	$('#mydate').glDatePicker(
	        	{	selectableDateRange: [{ from: new Date(), to: new Date (2014, 2, 1) }],
	        		selectableDOW: [1,2,3,4,5],
	        		dowNames: "SMTWTFS",
	        		dowOffset: 1,
	        		width:250,
	        		 onClick: function(target, cell, date, data) {
	        		      var month = date.getMonth()+1;  
	        			  target.val(date.getFullYear() + '-' +
	        		                    month+ '-' +
	        		                    date.getDate());
	
	        		        if(data != null) {
	        		            alert(data.message + '\n' + date);
	        		        }
	        		    }
	        	}	
	        	
	        	);
	        });
	        
	       
	    </script>
	 </div>

	<div class = "datepickerEnd">
	<p>To:</p>
	<input id="todate" name="todate" type="text"  placeholder="Last Day Off"/>
	 <script type="text/javascript">
	
	        $(window).load(function()
	        {	
	        	$('#todate').glDatePicker(
	        			{  	selectableDateRange: [{ from: new Date(), to: new Date (2014, 2, 1) }],
	        				selectableDOW: [1,2,3,4,5],
	        				dowNames: "SMTWTFS",
	            			dowOffset: 1,
	            			width:250,
	            			 onClick: function(target, cell, date, data) {
	               		      var month = date.getMonth()+1;  
	               			  target.val(date.getFullYear() + '-' +
	               		                    month+ '-' +
	               		                    date.getDate());
	
	               		        if(data != null) {
	               		            alert(data.message + '\n' + date);
	               		        }
	               		    }
	            			
	        			});
	        	
	        });
	        
	       
	    </script>
	    <br>
	     ${error}
	     <br>
	    <button type="submit" class="button btn btn-success btn-large">book </button>
	    <p> </p>
	</div>
	</form>
	</div>
	<div id="container"><div id="navigation">
	 <div class="widget widget-nopad">
	            <div class="widget-header"> <i class="icon-list-alt"></i>
	              <h3>Upcoming Events</h3>
	            </div>
	            <!-- /widget-header -->
	            
	<c:forEach items="${event}" var="item">
	<div class="widget-content">
	              <ul class="news-items">
	                <li>
 <div class="news-item-date"> <span class="news-item-day">${item.eventDate}</span> <span class="news-item-month"></span>  </div>
 <div class="news-item-detail"  > <a href="#" class="news-item-title" target="_blank">${item.eventTitle}</a>  </div>
 <p class="news-item-preview">	   ${item.eventInfo} </p></div>
 </li>
  </ul>
</c:forEach>
	
	                  
<!-- 	                     -->
<!-- 	                    -->
<!-- 	                     This is our web design and development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.  -->
	                 
	                  
	                
<!-- 	                <li> -->
	                  
<!-- 	                  <div class="news-item-date"> <span class="news-item-day">15</span> <span class="news-item-month">Jun</span> </div> -->
<!-- 	                  <div class="news-item-detail"> <a href="http://www.egrappler.com/retina-ready-responsive-app-landing-page-website-template-app-landing/" class="news-item-title" target="_blank">Company Event</a> -->
<!-- 	                    <p class="news-item-preview"> App Landing is a retina ready responsive app landing page website template perfect for software and application developers and small business owners looking to promote their iPhone, iPad, Android Apps and software products.</p> -->
<!-- 	                  </div> -->
	                  
<!-- 	                </li> -->
<!-- 	                <li> -->
	                  
<!-- 	                  <div class="news-item-date"> <span class="news-item-day">29</span> <span class="news-item-month">Oct</span> </div> -->
<!-- 	                  <div class="news-item-detail"> <a href="http://www.egrappler.com/open-source-jquery-php-ajax-contact-form-templates-with-captcha-formify/" class="news-item-title" target="_blank">Company Day Off</a> -->
<!-- 	                    <p class="news-item-preview"> Formify is a contribution to lessen the pain of creating contact forms. The collection contains six different forms that are commonly used. These open source contact forms can be customized as well to suit the need for your website/application.</p> -->
<!-- 	                  </div> -->
	                  
<!-- 	                </li> -->
	             
	            </div>
	            </div>
	           </div>
	           </div>
	</body>
</html>